<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>社区详情</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/layer.css" />
    <link rel="stylesheet" type="text/css" href="../css/mdw.css" />
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/jquery-1.9.1.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <script type="text/javascript" src="../script/clipboard.min.js"></script>
    <script type="text/javascript" src="../script/swiper.min.js"></script>
    <script type="text/javascript" src="../script/mobile.js"></script>
    <script type="text/javascript" src="../script/layer.js"></script>
    <script type="text/javascript" src="../script/mdw.js"></script>
    <script type="text/javascript" src="../script/jumpPage.js"></script>

</head>
<body>
    <header class="header com_detailsHeader">
        <div class="backPrevPage" onclick="historyBack()"></div>
    </header>
    <section class="com_detailPage HTML_BOX">
        <div class="com_mainImage">
            <!-- <video src="" controls="controls" crossOrigin="Anonymous" x5-video-player-type="h5"  width="100%"></video> -->
            <!-- <img src="../image/com_bg.png" /> -->
            <!-- <div class="com_mainBox" style="left: 13%;top: 23%;">
                <div class="com_IconBG"><div class="com_icon"></div></div>
                <div class="com_mainWhite"></div>
                <div class="box1 mainBox">非常的健康养生</div>
            </div>
            <div class="com_mainBox" style="left: 23%;top: 45%;">
                <div class="com_IconBG"><div class="com_icon"></div></div>
                <div class="com_mainWhite"></div>
                <div class="box2 mainBox"><i></i><div>14''</div></div>
            </div> -->
        </div>
        <div class="com_detailBox1 plr displayFlex">
            <div class="userBox1">
                <img class="userTx" src="" />
                <div class="uname">王多多王多多</div>
            </div>
            <div class="comCount">
                <i></i>2508
            </div>
        </div>
        <div class="com_detailBox2 plr">
            <i></i><span>可购买商品</span><i class="icon"></i>
        </div>
        <p class="plr com_neirong f24">
            超新鲜蔬菜水果，吃了健康养生哦~超新鲜蔬菜水果，吃了健康养生哦~超新鲜蔬菜水果，吃了健康养生哦~超新鲜蔬菜水果，吃了健康养生哦~超新鲜蔬菜水果，吃了健康养生哦
        </p>
        <div class="com_time f24 plr">2018-08-06</div>
        <div class="com_detailBox3 plr displayFlex">
            <div class="icon fenxiang icon1"><i></i><span></span></div>
            <div class="com_BoxRight">
                <div class="icon icon2 mr50"><i></i><span></span></div>
                <div class="icon icon3 mr50"><i></i><span></span></div>
                <div class="icon icon4 "><i></i><span></span></div>
            </div>
        </div>
        <div class="bg-eee" style="border-bottom:.2rem solid #EEE ; "></div>
        <div class="com_evaTitle displayFlex plr">评论</div>
        <div class="plr">
            <div class="com_evaBox">
                <input placeholder="说点什么..." />
                <div class="com_evaBtn f_c">评论</div>
            </div>
        </div>
        <ul class="com_evaList">
            <li class="plr">
                <div class="evaTx">
                    <img  src="../image/tx.png" />
                </div>
                <div class="evaBox">
                    <div class="evaBox_name">很老很老的鹰</div>
                    <div class="">大家不需要在国内买kindle! 法亚有时打折比国内便宜好几百人民币呢!! 而且可以登陆中国亚马逊账号，在淘宝买个书籍推送就可以啦，很方便的!!</div>
                    <div class="evaItem displayFlex">
                        <div class="evaBoxTime">6-18 15:23</div>
                        <div class="">回复</div>
                    </div>
                    <div class="evaItem2">
                        <div class="triangle_border_up">
                            <span></span>
                        </div>
                        <p>Doctor喵（作者）：签证也过海关会盖章，还是来了复印就好吧，去年带了一摞复印件根本没用。到是买了一分钱推荐的打印机19.9欧</p>
                    </div>
                </div>
            </li>
        </ul>
        
        <div class="pageHide dn">暂无数据..</div>
    </section>
    <!-- 弹窗 -->
    <div class="mask_pop">
        <div class="mask" ></div>
        <div class="fenxiang_pop pop_Item ">
            <div class="f_c fenxiang_pop_title">分享给</div>
            <ul class="fenxiangList plr">
                <li class="pyq"><i></i><span>朋友圈</span></li>
                <li class="weibo"><i></i><span>微博</span></li>
                <li class="qq"><i></i><span>QQ</span></li>
                <li class="facebook"><i></i><span>Facebook</span></li>
            </ul>
            <ul class="fenxiangList plr">
                <li class="wx bn"><i></i><span>微信</span></li>
                <li class="youxiang bn"><i></i><span>邮箱</span></li>
                <li class="clear bn"><i></i><span>生成分享图</span></li>
                <li class="copy bn"><i></i><span>复制链接</span></li>
            </ul>
            <div id="qrcode"></div>
            <a class="downcode dn" download="分享二维码">点击保存二维码</a>
            <div class="pop_close2 f_c">取消</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    var id = 0;
    var ifpage=true;
    $(".fenxiang").click(function(){
        maskOpen();
    });
    $(".pop_close2").click(function(){
        maskClose();
    });
    var pro_id;
    $(".com_detailBox2").click(function(){
        goWare(pro_id);
    })
    apiready = function(){
        $api.fixStatusBar($api.dom('header'));
        api.setStatusBarStyle({
            color: '#fff',//设置APP状态栏背景色
            style: 'dark'
        });
        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                 threshold: 10
            }
         }, function(ret, err) {
             //页码+1，继续请求数据
             page++;
             comment_list();
        });
        id = api.pageParam.id;
        comment_list();
        ready();
    };
    var comdata;
    function ready(){
        pop.loading();
        getAjax(Interface.comm_detail,{token:token,id:id},function(res){
            console.log(JSON.stringify(res));
            pop.close();
            var data = res.data;
            comdata = data;
            pro_id = data.pro_id;
            if(pro_id==0){
                $(".com_detailBox2").hide();
            }
            collect_id = data.collect_id;
            is_collect = data.is_collect;
            is_zan = data.is_zan;
            if(is_zan){
                $(".icon2").addClass("on");
            }
            if(is_collect){
                $(".icon3").addClass("on");
            }
            if(is_collect){
                $(".icon3").addClass("on");
            }
            if(data.video){
                $(".com_mainImage").html('<video poster="'+getImg(data.icon)+'" src="'+getImg(item.video)+'" controls="controls" crossOrigin="Anonymous" x5-video-player-type="h5"  width="100%"></video>');
            }else{
                $(".com_mainImage").html('<img src="'+getImg(data.icon)+'" />');
            }
            console.log(data.uicon);
            $(".com_neirong").html(data.content);
            $(".com_time").html(timestampToTime(data.create_time));
            $(".fenxiang span").html(data.zhuan_num || 0);
            $(".icon2 span").html(data.zan_num || 0);
            $(".icon3 span").html(data.collect_num || 0);
            $(".icon4 span").html(data.pl_num || 0);
            $(".comCount").html("<i></i>"+data.view_num);
            $(".userTx").attr("src",getImg(data.uicon));
            $(".uname").html(data.username);
        },function(res,err){})
    }

    $(".com_evaBtn").click(function(){
        if(!isLogin()){
            return;
        }
        var val = $(".com_evaBox input").val();
        if(val ==""){
            var msg = "请输入您要发表的评论";
            if(cnen==2){
                msg = "Please enter your comments"
            }
            pop.notice(msg);
            return;
        }
        pop.loading();
        getAjax(Interface.comm_comment,{comm_id:id,token:token,content:val},function(res){
            pop.close();
            pop.notice(res.msg);
            page=1;
            comment_list();
        },function(res,err){})
    })
    $(".pyq").click(function(){
        var p = {
            apiKey: '',
            scene: 'timeline',
            title:comdata.title,
            thumb:ajaxUrl.url + '/Public/Home/images/logo_ios.png',
            contentUrl:ajaxUrl.url +'/mobile/html/community_details.html?id='+api.pageParam.id,
        };
        wxpyqFX(p);
    })
    $(".wx").click(function(){
        var p = {
            apiKey: '',
            scene: 'session',
            title:comdata.title,
            thumb:ajaxUrl.url + '/Public/Home/images/logo_ios.png',
            contentUrl:ajaxUrl.url +'/mobile/html/community_details.html?id='+api.pageParam.id,
        };
        wxpyqFX(p);
    })
    $(".weibo").click(function(){
        var p = {
            apiKey: '',
            scene: 'session',
            title:comdata.title,
            text:comdata.title,
            thumb:ajaxUrl.url + '/Public/Home/images/logo_ios.png',
            contentUrl:ajaxUrl.url +'/mobile/html/community_details.html?id='+api.pageParam.id,
        };
        WeiBofx(p);
    })
    $(".qq").click(function(){
        var p = {
            url: ajaxUrl.url +'/mobile/html/community_details.html?id='+api.pageParam.id,
            title: comdata.title,
            description: comdata.title,
            imgUrl: ajaxUrl.url + '/Public/Home/images/logo_ios.png',
        }
        qqfx(p);
    })
    
    $(".facebook").click(function(){
       var p =  {
            url: ajaxUrl.url +'/mobile/html/community_details.html?id='+api.pageParam.id,
            imgUrl: ajaxUrl.url + '/Public/Home/images/logo_ios.png',
            description: '',
            title:comdata.title,
            
        };
        fackBookFX(p);
    })
    var clipboard = new Clipboard('.copy', {
        text: function() {
            return ajaxUrl.cnurl +"/mobile/html/community_details.html?id="+id;
        }
    });
    clipboard.on('success', function(e) {
        pop.notice("链接复制成功");
    });
 
    clipboard.on('error', function(e) {
        console.log(e);
    });
    $(".clear").click(function(){
        console.log($('#qrcode').find('canvas').length)
        if($('#qrcode').find('canvas').length <1){
            var qrcode= $('#qrcode').qrcode(ajaxUrl.cnurl +"/mobile/html/ware.html?id="+param.id);   
            var canvas=qrcode.find('canvas').get(0);  
            $('.downcode').attr('href',canvas.toDataURL('image/jpg'));
            // $('.downcode').removeClass('dn');
        }
    })
    var is_zan = false;
    $(".icon2").click(function(){
        if(!isLogin()){
            return;
        }
        pop.loading();
        var p = {token:token,type:1,id:id};
        if(is_zan){
            p.zan_state =2; 
        }else{
            p.zan_state =1; 
        }
        getAjax(Interface.comm_zan_zhuan,p,function(res){
          console.log(JSON.stringify(res));
          pop.close();
          if(!is_zan){
            res.msg = "点赞成功";
            if(cnen==2){
                res.msg="success!"
            }
            pop.notice(res.msg);
            is_zan=true;
            $(".icon2").addClass("on");
            $(".icon2 span").html(Number($(".icon2 span").html())+1);
          }else{
            is_zan=false;
            $(".icon2").removeClass("on");
            $(".icon2 span").html(Number($(".icon2 span").html())-1);
          }
        },function(res,err){
            res.msg = "已经点过赞了";
          if(cnen==2){
            res.msg="It's been praised!"
          }
        })
    })

    var is_collect = false;
    var collect_id = 0;
    $(".icon3").click(function(){
        if(!isLogin()){
            return;
        }
        pop.loading();
        console.log(is_collect);
        if(is_collect){
            getAjax(Interface.del_collect,{token:token,id:collect_id},function(res){
                pop.close();
                pop.notice(res.msg);
                 is_collect = false;
                $(".icon3").removeClass("on");
                $(".icon3 span").html(Number($(".icon3 span").html())-1);
            },function(res,err){})
        }else{
            var p = {token:token,type:3,comm_id:id};
            //console.log(JSON.stringify(p));
            getAjax(Interface.join_collect,p,function(res){
              console.log(JSON.stringify(res));
              pop.close();
              pop.notice(res.msg);
              page=1;
              is_collect = true;
              collect_id = res.data;
              $(".icon3").addClass("on");
              $(".icon3 span").html(Number($(".icon3 span").html())+1);
            },function(res,err){

            })
        }
    })
    var page = 1;
    function comment_list(){
        pop.loading();
        getAjax(Interface.comment_list,{page:page,id:id},function(res){
            console.log(JSON.stringify(res));
            pop.close();
            var list = res.data;
            if(page==1){
                $(".com_evaList").empty();
            }
            if(list && list.length > 0){
                $(".pageHide").addClass("dn");ifpage=true;
                
                $.each(list,function(i,item){
                    var html = '';
                    html+='<li class="plr">';
                        html+='<div class="evaTx">';
                            html+='<img style="border-radius:50%" src="'+getImg(item.uicon)+'" />';
                        html+='</div>';
                        html+='<div class="evaBox">';
                            html+='<div class="evaBox_name">'+item.username+'</div>';
                            html+='<div class="">'+item.content+'</div>';
                            html+='<div class="evaItem displayFlex">';
                                html+='<div class="evaBoxTime">'+timestampToTime2(item.create_time)+'</div>';
                                html+='<div class="">回复</div>';
                            html+='</div>';
                            // html+='<div class="evaItem2">';
                            //     html+='<div class="triangle_border_up"><span></span></div>';
                            //     html+='<p>Doctor喵（作者）：签证也过海关会盖章，还是来了复印就好吧，去年带了一摞复印件根本没用。到是买了一分钱推荐的打印机19.9欧</p>';
                            // html+='</div>';
                        html+='</div>';
                   html+=' </li>';
                    $(".com_evaList").append(html);
                })
                if(list.length<10){
                    $(".getPage").hide();
                }
                
            }else{
                ifpage=false;
                if(page==1){$(".pageHide").removeClass("dn");}
            }
        },function(res,err){})
    }

    $(".comment_list").click(function(){
        page++;
        getList();
    })

    function timestampToTime(timestamp) {
    //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var date = new Date(timestamp * 1000);
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
        h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours())+ ':';
        m = (date.getMinutes()< 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
        s = date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds();
        return Y+M+D;
    }
    function timestampToTime2(timestamp) {
    //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var date = new Date(timestamp * 1000);
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
        h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours())+ ':';
        m = (date.getMinutes()< 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
        s = date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds();
        return Y+M+D+h+m+s;
    }
   
</script>
</html>